<template>
  <div
    @click="
      $router.push({
        path: '/detail',
        query: {
          id: item.productId,
        },
      })
    "
    class="cardbox"
    :style="{
      width: newwidth + 'rem',
      height: newheight + 'rem',
      marginBottom: bottom + 'rem',
    }"
    @mouseover="ishover = false"
    @mouseleave="ishover = true"
  >
    <div class="imgbox" :style="{ height: newheightB + 'rem' }">
      <img
        :src="item.imageUrl"
        alt=""
        :style="{ width: newwidth + 'rem', height: newheightB + 'rem' }"
      />
    </div>
    <div class="price">
      <div class="leftprice" v-if="token">￥{{ item.productPrice }}</div>
      <div class="leftbutton" v-else>
        <div class="button">登录看价</div>
      </div>

      <img
        src="../../../static/popularityimgs/fenxiaologo.png"
        alt=""
        style="height: 0.16rem; width: 0.16rem; margin-right: 0.05rem"
      />
      <div class="righttext">分销：{{ item.productSales }}</div>
    </div>
    <div class="colortitle">{{ item.specification }}</div>
    <div class="bottom" v-if="ishover">
      <div class="toptext">{{ item.productName ? item.productName : "" }}</div>
      <div class="middletext">
        <div
          style="
            font-family: PingFang SC;
            font-size: 0.14rem;
            color: #999999;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
        >
          上新：{{ item.lastNewTime }}
        </div>

        <img
          src="../../../static/popularityimgs/shoplog.png"
          alt=""
          style="margin-right: 0.035rem"
        />
        <div
          style="
            font-family: PingFang SC;
            font-size: 0.14em;
            color: #999999;
            width: 40%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
        >
          {{ item.storeName }}
        </div>
      </div>
      <div class="chengxin" v-if="item.storeType == '1'">
        <div style="display: flex; align-items: center; margin-top: 0.2rem">
          <img src="../../../static/popularityimgs/chengxin.png" alt="" />
          <span
            style="font-family: PingFang SC; font-size: 0.16rem; color: #ec6c15"
            >诚信商家</span
          >
        </div>
      </div>
    </div>
    <div class="hoverbox" v-else>
      <div class="size">
        <div>{{ item.productColorNumber }}色</div>
        <div>{{ item.productYardNumber }}码</div>
      </div>
      <div class="buybutton">加入购物车</div>
    </div>
  </div>
</template>

<script>
import { getToken, removeToken } from "@/utils/auth";
export default {
  props: ["width", "height", "bottom", "boxheight", "item", "type", "right"],
  data() {
    return {
      token: false,
      ishover: true,
      newheight: "",
      newwidth: "",
      newheightB: "",
    };
  },
  created() {
    if (window.innerWidth < 1300 && this.type) {
      this.newheight = "4.4";
      this.newwidth = "2.2";
      this.newheightB = "2.2";
    } else {
      this.newheight = this.boxheight;
      this.newwidth = this.width;
      this.newheightB = this.height;
    }
    this.token = getToken();
  },
  activated() {
    if (window.innerWidth < 1300 && this.type) {
      this.newheight = "4.4";
      this.newwidth = "2.1";
      this.newheightB = "2.2";
    } else {
      this.newheight = this.boxheight;
      this.newwidth = this.width;
      this.newheightB = this.height;
    }
    this.token = getToken();
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.cardbox {
  // margin: 0 0.06rem;
  box-sizing: border-box;
  border: 0.01rem solid #f5f5f5;
  cursor: pointer;
  padding: 0.05rem 0.05rem 0;
  width:1.94rem;
  height: 3.5rem;
  background-color: #fff;
  border: 0.01rem solid #f5f5f5;
  transform: scale(1);
  transition: all 0.6s;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 0.1rem;

  .imgbox {
    width: 100%;
    height: 1.8rem;

    img {
      width: 100%;
      height: 1.8rem;
    }
  }

  .price {
    height: 0.17rem;
    width: 100%;
    margin-top: 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .leftprice {
      font-family: D-DIN;
      color: #e22a1f;
      font-size: 0.16rem;
      font-weight: bold;
      flex: 1;
    }

    .leftbutton {
      flex: 1;
      width: 0.6rem;

      // height: 0.21rem;
      // border-radius: 0.04rem;
      // background: linear-gradient(98deg, #fd4422 17%, #ff6721 97%);
      .button {
        width: 0.8rem;
        cursor: pointer;
        height: 0.26rem;
        border-radius: 0.04rem;
        background: linear-gradient(98deg, #fd4422 17%, #ff6721 97%);
        font-family: PingFang SC;
        font-size: 0.16rem;
        color: #ffffff;
        line-height: 0.26rem;
        text-align: center;
      }
    }

    .righttext {
      font-family: PingFang SC;
      font-size: 13px;
      color: #999999;
    }
  }

  .colortitle {
    font-family: PingFang SC;
    font-size: 0.16rem;
    color: #ec6c15;
    margin-top: 0.13rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bottom {
    display: flex;
    flex-direction: column;

    margin-top: 0.2rem;

    // background-color: black;
    .toptext {
      font-family: PingFang SC;
      font-size: 0.16rem;
      color: #666666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; //溢出用省略号显示
    }

    .middletext {
      height: 0.17rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.2rem;
    }

    .chengxin {
      height: 0.179rem;
    }
  }

  .hoverbox {
    display: flex;
    flex-direction: column;

    margin-top: 0.1rem;

    .size {
      display: flex;
    }

    .size div {
      width: 0.54rem;
      height: 0.23rem;
      border-radius: 0.04rem;
      background: #e8e8e8;
      color: #999999;
      font-family: PingFang SC;
      font-size: 0.16rem;
      text-align: center;
      line-height: 0.23rem;
      margin-left: 0.06rem;
    }

    .buybutton {
      margin-top: 0.17rem;
      width: 100%;
      height: 0.29rem;
      background: #ec6c15;
      border-radius: 4px;
      font-family: PingFang SC;
      font-size: 0.16rem;
      text-align: center;
      line-height: 0.29rem;
      color: #ffffff;
    }
  }
}

.cardbox:hover {
  // border: 0.01rem solid #ec6c15;
  background: #fff;
  transform: scale(1.05);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .cardbox {
    // margin: 0 0.06rem;
    border: 0.01rem solid #f5f5f5;
    cursor: pointer;
    padding: 0.05rem 0.05rem 0;
    width: 1.9rem;
    height: 3.5rem;
    background-color: #fff;
    border: 0.01rem solid #f5f5f5;
    transform: scale(1);
    transition: all 0.6s;
    overflow: hidden;

    .imgbox {
      width: 100%;
      height: 1.75rem;
      img{
        width: 100%;
        height: 1.75rem;
      }
    }

    .price {
      height: 0.17rem;
      width: 100%;
      margin-top: 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .leftprice {
        font-family: D-DIN;
        color: #e22a1f;
        font-size: 0.16rem;
        font-weight: bold;
        flex: 1;
      }

      .leftbutton {
        flex: 1;
        width: 0.6rem;

        // height: 0.21rem;
        // border-radius: 0.04rem;
        // background: linear-gradient(98deg, #fd4422 17%, #ff6721 97%);
        .button {
          width: 1rem;
          cursor: pointer;
          height: 0.21rem;
          border-radius: 0.04rem;
          background: linear-gradient(98deg, #fd4422 17%, #ff6721 97%);
          font-family: PingFang SC;
          font-size: 0.14rem;
          color: #ffffff;
          line-height: 0.21rem;
          text-align: center;
        }
      }

      .righttext {
        font-family: PingFang SC;
        font-size: 0.14rem;
        color: #999999;
      }
    }

    .colortitle {
      font-family: PingFang SC;
      font-size: 0.14rem;
      color: #ec6c15;
      margin-top: 0.2rem;
    }

    .bottom {
      display: flex;
      flex-direction: column;

      margin-top: 0.2rem;

      // background-color: black;
      .toptext {
        font-family: PingFang SC;
        font-size: 0.14rem;
        color: #666666;
        white-space: nowrap;
      }

      .middletext {
        height: 0.17rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.2rem;
      }

      .chengxin {
        height: 0.179rem;
      }
    }

    .hoverbox {
      display: flex;
      flex-direction: column;

      margin-top: 0.2rem;

      .size {
        display: flex;
        font-size: 0.16rem;
      }

      .size div {
        width: 0.54rem;
        height: 0.23rem;
        border-radius: 0.04rem;
        background: #e8e8e8;
        color: #999999;
        font-family: PingFang SC;
        font-size: 0.14rem;
        text-align: center;
        line-height: 0.23rem;
        margin-left: 0.06rem;
      }

      .buybutton {
        margin-top: 0.17rem;
        width: 100%;
        height: 0.29rem;
        background: #ec6c15;
        border-radius: 4px;
        font-family: PingFang SC;
        font-size: 0.12rem;
        text-align: center;
        line-height: 0.29rem;
        color: #ffffff;
      }
    }
  }

  .cardbox:hover {
    // border: 0.01rem solid #ec6c15;
    background: #fff;
    transform: scale(1.05);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
